<template>
  <div class="change_password">
    <div class="account">
      当前手机号:<span>{{ loginUserInfo.data.phone | phone }}</span>
    </div>
    <div class="form">
      <div class="form_group new">
        <input type="password" placeholder="设置新密码" v-model="password" />
      </div>
      <div class="form_group confire">
        <input type="password" placeholder="确认新密码" v-model="password1" />
      </div>
      <div class="form_group vcode">
        <div class="vcode_box">
          <input
            type="text"
            placeholder="填写验证码"
            v-model="vcode"
            maxlength="6"
          />
          <span class="vc1" v-show="isShow" @click="getVcode">获取验证码</span>
          <span class="vc2" v-show="!isShow">{{ num }}s后重新获取</span>
        </div>
      </div>
    </div>
    <div class="btn" @click="clickReset">确认修改</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast } from 'vant';
export default {
  data() {
    return {
      isShow: true,
      num: 0,
      delay: null,
      vcode: "",
      vcodeKey: "",
      password: "",
      password1: "",
    };
  },
  created() {
    this.initVcode();
  },
  computed: {
    ...mapGetters("login", ["loginUserInfo"]),
  },
  methods: {
    getVcode() {
      if (this.password.length == 0 || this.password1.length == 0) {
        this.$toast.show("密码不能为空！", 1500);
        return
      } 

      this.isShow = false;
      this.num = 5;
      if (this.isShow == false) {
        this.getVocdeDetail();
        if (this.num >= 0 && this.num <= 5) {
          this.delay = setInterval(() => {
            this.num--;
            if (this.num < 0) {
              this.num = 0;
              this.isShow = true;
              clearInterval(this.delay);
            }
          }, 1000);
        }
      }
    },
    initVcode() {
      let token = localStorage.getItem("token");
      axios({
        url: "/api/verify_code",
        method: "get",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        this.vcodeKey = res.data.data.key;
      });
    },

    getVocdeDetail() {
      let token = localStorage.getItem("token");
      let data = {
        phone: this.loginUserInfo.data.phone,
        key: this.vcodeKey,
        code: "",
      };
      axios({
        url: "/api/register/verify",
        method: "post",
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        Toast.success('发送成功');
      });
    },

    reset() {
      let token = localStorage.getItem("token");
      let data = {
        account: this.loginUserInfo.data.phone,
        captcha: this.vcode,
        code: "",
        password: this.password,
      };
      axios({
        url: "/api/register/reset",
        method: "post",
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        this.$toast.show("修改成功!",2000)
        this.$router.push('/login')
        console.log("成功", res.data);
      });
    },

    clickReset() {
      if (this.password.length == 0 || this.password1.length == 0) {
        this.$toast.show("密码不能为空！", 1500);
        return
      } else if (this.vcode.length == 0) {
        this.$toast.show("请输入验证码！", 1500);
        return;
      } else if (this.password != this.password1) {
        this.$toast.show("密码不一致", 1500);
        return;
      }else{
          // 执行
            if(this.password.length > 16){
                this.$toast.show("密码不能超过16", 1500);
                return;
            }

            this.reset()

      }
    },
  },
  filters: {
    phone(val) {
      return val.replace(val.slice(3, 7), "****");
    },
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#fff";
  },
  destroyed(){
    document.querySelector("body").style.backgroundColor = "#f5f5f5";
  }
};
</script>

<style lang="scss" scoped>
.account {
  text-align: center;
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin: 30px 0;
  span {
    color: #333;
    font-weight: normal;
    font-size: 15px;
  }
}
.form {
  .form_group {
    padding: 0 45px;
    height: 54px;
    > input {
      width: 100%;
      display: block;
      outline: none;
      font-size: 16px;
      height: 100%;
      border: 0;
      border-bottom: 1px solid #f5f5ff;
    }
  }

  .vcode {
    .vcode_box {
      width: 100%;
      height: 54px;
      position: relative;
      > input {
        width: 100%;
        display: block;
        outline: none;
        font-size: 16px;
        height: 100%;
        border: 0;
        border-bottom: 1px solid #f5f5ff;
      }
      > span {
        display: inline-block;
        position: absolute;
        height: 100%;
        line-height: 54px;
        right: 0;
        top: 0;
        color: #fc4141;
        font-size: 15px;
      }
    }
  }
}
.btn {
  width: 290px;
  height: 45px;
  background-color: #fc4141;
  color: #fff;
  border-radius: 22.5px;
  margin: 25px auto 0;
  font-size: 16px;
  text-align: center;
  line-height: 45px;
}
</style>

